<template>
  <view class="btn-wrapper" @click="handleClick">
    <view v-if="service && showCustomerService" class="service">
      <p-customer-service :fixed="false" :store-info="storeInfo" :session-from="sessionFrom" :share-customer-data="shareCustomerData"/>
    </view>
    <view class="btn">
      <view class="img" v-if="detail && detail.imageUrl">
        <x-image :src="detail.imageUrl"/>
      </view>
      <text>{{ detail.value || '立即购买' }}</text>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import { mapState } from 'vuex';
import PCustomerService from '../p-customer-service/index.vue';

export default {
  name: 'PFixedButton',
  components: {
    PCustomerService,
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => null
    },
    storeInfo: {
      type: Object,
      default: () => null
    },
    shareCustomerData: {
      type: Object,
      default: () => null
    },
    sessionFrom: {
      type: [Object, String],
      default: () => null
    },
    service: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      // 页面模块
      pageModule: state => state['product'].pageModule || {}
    }),
    showCustomerService() {
      return this.pageModule?.customerService;
    }
  },
  watch: {},
  created() {

  },
  methods: {
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url);
    },
    handleClick() {
      // console.log(1, this.colorTheme);
      this.$emit('click', this.placement);
    }
  }
};
</script>

<style lang="scss" scoped>
  .btn-wrapper{
    background: rgba(0,0,0,.8);
    border-radius: 100px;
    margin-bottom: env(safe-area-inset-bottom);
    padding: 12px;
    display: flex;
    align-items: center;
    margin-left: 24px;
    margin-right: 24px;

    .service{
      font-size: 24px;
      color: #FFFFFF;
      padding: 0 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .btn{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
      height: 100%;
      color: #fff;
      font-size: 28px;
      border-radius: 100px;
      background: linear-gradient(270deg, #F85F22 0%, #FFAB80 100%);
      .img{
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
    }
  }
</style>
